<template>
  <div ref="detail" id="detail">
    <a-back-top :target="target"> </a-back-top>
    <a-breadcrumb>
      <a-breadcrumb-item><a @click="$router.go(-1)">博客</a></a-breadcrumb-item>
      <a-breadcrumb-item>{{ blogDetailContent.title }}</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="header" ref="test">
      <h1 style="text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.8)">
        {{ blogDetailContent.title }}
      </h1>

      <!-- <h1>{{blogDetailContent.title}}</h1>  -->
      <p style="font-family: veria Sans Libre, Fantasy">
        <span>ttzxh</span><span>｜</span>
        <span>{{ parseInt(blogDetailContent.time) | format }}</span>
        <span>
          观看：
          <span style="color: #5183e6; margin: 0px">{{ blogDetailContent.seeNum }}</span>
        </span>
        <span>
          点赞：
          {{ blogDetailContent.goodNum }}
        </span>
      </p>
    </div>
    <div
      class="content"
      style="font-weight: 300"
      v-html="blogDetailContent.content"
    ></div>
    <remark></remark>
  </div>
</template>

<script>
import { formatTime } from "../../formatTime";
import remark  from "./remark.vue";
export default {
  data() {
    return {
      blogDetailContent: [],
    };
  },
  components: {
    remark,
  },
  computed: {
    target() {
      console.log(document.querySelector("#contentDetail"));
      return () => document.querySelector("#contentDetail");
    },
  },
  created() {
    this.getBlogDetailContent();
  },
  filters: {
    format(val) {
      return formatTime(parseInt(val));
    },
  },
  methods: {
    detailCode() {
      let blockCode = document.querySelectorAll("pre code");
      console.log(blockCode);
      blockCode.forEach((item) => {
        item.innerHTML = `<ul><li>${item.innerHTML.replace(
          /\n/g,
          "\n</li><li>"
        )}</li></ul>`;
      });
    },
    getBlogDetailContent() {
      this.$axios
        .get("/blog/list", {
          params: {
            id: this.$route.params.id,
            status: this.$store.getters.user.status,
          },
        })
        .then((res) => {
          console.log(res);
          this.blogDetailContent = res.data.data[0];
          this.$nextTick(() => {
            this.detailCode();
          });
        });
    },
  },
};
</script>

<style lang="less">
#detail {
  text-align: left;
  box-sizing: border-box;
  padding: 16px;
}
.hljs {
  margin: 8px 0;
  padding: 8px 8px;
  overflow-x: auto;
  font-size: 14px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  &::before {
    content: "";
    width: 100%;
    height: 40px;
    background-color: red;
  }
}
.hljs {
  opacity: 0.8;
  border: 0;
  font-family: "Consulas", "Courier New", Courier, mono, serif;
  font-size: 12px;
  background: #eee !important;
  display: block;
  width: 100%;
  font-weight: 400;
  color: #333;
  white-space: pre-wrap;
}
.hljs ul {
  list-style-type: style;
  background-color: #fff;
  margin: 0px 0px 0 40px !important;
  padding: 0px;
}
.hljs ul li {
  list-style-type: style;
  border-left: 1px solid #ddd !important;
  background: #fff;
  padding: 5px !important;
  margin: 0 !important;
  line-height: 14px;
  word-break: break-all;
  word-wrap: break-word;
  color: #333;
}
.hljs ul li:nth-of-type(even) {
  // background-color: #fcfcfc;
  // color: #333;
}
</style>

<style lang="less" scoped>
.header {
  text-align: center;
  overflow: hidden;
  h1 {
    margin-top: 35px;
  }
  p {
    color: #777777;
    // margin-top: 10px;
    span {
      margin: 0 15px;
      i {
        margin: 0 5px;
      }
    }
  }
}
.content {
  padding: 55px;
  font-size: 17px;
  color: #333;
  /deep/ p {
    text-indent: 2em;
    margin-bottom: 16px;
  }
  /deep/ li {
    white-space: pre-wrap;
  }
  /deep/ h3 {
    margin: 16px 0;
  }
  /deep/ h2 {
    margin: 16px 0;
  }
  /deep/ h4 {
    margin: 16px 0;
  }
  /deep/ ol li {
    list-style: decimal;
    margin: 8px 0;
  }
  /deep/ blockquote {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 8px !important;
  }
  /deep/ pre code ul li {
    // list-style: none;
    text-indent: 2em;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3px 8px;
  }
  /deep/ ul li {
    //list-style: disc;
    padding: 2px 0;
  }
  /deep/ ul li ul li {
    list-style: circle;
    line-height: 0;
  }
  div {
    font-size: 16px;
  }
}
@media screen and(max-width: 765px) {
  .header {
    color: #f5f5f5;
    p {
      color: #f5f5f5;
    }
  }

  .content {
    color: blanchedalmond;
    padding: 35px;
    font-size: 17px;
  }
}
</style>
